import { useEffect, useState } from "react";
import { getUserInfoList } from "../../apis/userinfo/userinfo";
import type { UserInfo, UserInfoParams } from "../../apis/userinfo/type";
import { Button, Flex, Form, Input, Pagination, Popconfirm, Table } from "antd";
import { Image } from 'antd';
import type { TableRowSelection } from "antd/es/table/interface";
import AddUser from "../../components/userinfo/AddUser";

const Users = () => {


    const [params, setParams] = useState<UserInfoParams>({ page: 1, psize: 10 });
    const [tableData, setTableData] = useState<UserInfo[] | undefined>([])
    const [total, setTotal] = useState<number>(0)
    const [isUserModalOpen, setIsUserModalOpen] = useState(false);  //添加居民
    const [editUserInfo, setEditUserInfo] = useState<UserInfo | undefined>();  //修改的居民信息

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            width: 60
        },
        {
            title: '头像',
            dataIndex: 'photo',
            width: 110,
            render: (text: string) => (
                <Image height={30} width={30} src={import.meta.env.VITE_IMG_URL + text}
                />
            ),
        },
        {
            title: '姓名',
            dataIndex: 'name',

        },
        {
            title: '性别',
            dataIndex: 'sex',
            render: (text: number) => (
              <>
               {text === 1 ? '男' : '女'}
              </>
            )


        },
        {
            title: '类型',
            dataIndex: 'usertypeName',

        },
        {
            title: '证件',
            dataIndex: 'cardid',

        },
        {
            title: '电话',
            dataIndex: 'mobile',

        },
        {
            title: '籍贯',
            dataIndex: 'usernative',

        },
        {
            title: '民族',
            dataIndex: 'nation',

        },
        {
            title: '房间号',
            dataIndex: 'houseno',

        },
        {
            title: '操作',
            dataIndex: 'id',
            width: 200,
            render: (value: number, record: UserInfo) => (
                <Flex gap={10}>
                    <Button onClick={() => edit(record)} type="primary">修改</Button>
                    <Popconfirm
                        title="提示"
                        description="确定要删除此记录吗？"
                        onConfirm={() => confirmDel(record.id)}
                        okText="删除"
                        cancelText="取消"
                    >
                        <Button type="primary">删除</Button>
                    </Popconfirm>
                </Flex>
            )
        }

    ]
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
      };
    
      const rowSelection: TableRowSelection<UserInfo> = {
        selectedRowKeys,
        onChange: onSelectChange,
      };

    const onFinish = (values: UserInfoParams) => {

        setParams({ ...params, ...values, page: 1 });

    }
    useEffect(() => {
        getUserInfoData();
    }, [params])

    const edit = (row: UserInfo) => {
        console.log("修改", row);

        setEditUserInfo(row);
        setIsUserModalOpen(true);

    }
    //删除
    const confirmDel = (id: number | undefined) => {
        alert(id);
    }
    // 批量删除
    const delMore = () => {
        alert("批量删除");
    }
    //关闭弹出
    const cancelHandle = () => {
       
        setIsUserModalOpen(false);
        setEditUserInfo(null);
    }
    const onChange = (page: number, psize: number) => {

        setParams({ ...params, page, psize })

    }


    const getUserInfoData = async () => {

        const res = await getUserInfoList(params);

        setTableData(res.data?.list);
        setTotal(res.data?.counts!);


    }



    return (
        <Flex vertical gap={20}>


             {/* 添加居民 */}
             {
                isUserModalOpen &&  <AddUser editUserInfo={editUserInfo} onCancel={cancelHandle} ></AddUser>
             }
           
            <Form layout="inline" onFinish={onFinish}>
                <Form.Item<UserInfoParams> label="姓名" name="name">
                    <Input placeholder="请输入姓名" />
                </Form.Item>
                <Form.Item<UserInfoParams> label="电话" name="mobile">
                    <Input placeholder="请输入电话" />
                </Form.Item>
                <Form.Item<UserInfoParams> label="房间号" name="houseno">
                    <Input placeholder="请输入房间号" />
                </Form.Item>
                <Form.Item label="">
                    <Button type="primary" htmlType="submit">搜索</Button>
                </Form.Item>

            </Form>

            <Flex gap={10}>
              <Button color="green" onClick={()=>setIsUserModalOpen(true)} variant="solid">添加</Button>
              <Button danger onClick={() =>delMore()} type="primary">批量删除</Button>
            </Flex>
            <Table rowSelection={rowSelection}  pagination={false} rowKey="id" dataSource={tableData} columns={columns} />
            <Flex justify="center">
                <Pagination onChange={onChange} current={params.page} total={total} />
            </Flex>

        </Flex>
    )
}
export default Users;